<template>
  <!-- 表格卡片 -->
  <a-card size="small" :bordered="false" :hoverable="true" :scroll="{ x: 1500 }">
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-row :gutter="16">
          <a-col :span="8"> <a-date-picker v-model:value="years" picker="year" :valueFormat="'YYYY'" @change="changedate" /></a-col>
          <a-col :span="4">
            <a-button type="primary" @click="getInitDateFind"><SearchOutlined />决算</a-button></a-col
          >
          <a-col :span="4">
            <a-button @click="getRemase"> <ReloadOutlined />重置</a-button></a-col
          >
          <a-col :span="2">
            <a-button @click="getImport"><VerticalAlignBottomOutlined />导出word</a-button></a-col
          >
        </a-row>
      </div>
      <div class="smart-table-setting-block">
        <a-tooltip placement="topLeft">
          <template #title>
            <span>返回上级</span>
          </template>
          <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
        </a-tooltip>
      </div>
    </a-row>
    <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns"
      :row-key="(record) => record.blfinalaccountsid"
      :pagination="false"
      :loading="tableLoading"
      bordered
      @change="handleTableChange"
    >
      <template v-slot:emptyText>
        <div style="color: #1d7cff; font-size: 30px; height: 400px; line-height: 200px">请选择年份....</div>
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'action'" title="操作">
          <div class="smart-table-operate">
            <a-space>
              <a-button size="small" @click="showModal(record.blfinalaccountsid)"> 填写差异分析 </a-button>
              <a-button type="primary" size="small" @click="showModalEdit(record)">
                <FormOutlined />
              </a-button>
            </a-space>
          </div>
        </template>
        <template v-if="column.dataIndex === 'bldiffreason'" title="差异原因分析">
          <div class="smart-table-operate">
            {{ record.bldiffreason ? record.bldiffreason : '未填写' }}
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
  <!-- 填写差异分析 -->
  <a-modal v-model:open="open" title="填写差异分析" @ok="handleOk">
    <a-textarea v-model:value="VarianceValue" placeholder="填写差异分析" :rows="4" />
  </a-modal>
  <!-- 修改 -->
  <a-modal v-model:open="openEdit" title="填写差异分析" @ok="handleOkEdit">
    <a-form :model="EditFrom" :label-col="labelCol">
      <a-form-item label="预算金额">
        <a-input v-model:value="EditFrom.blbudget" placeholder="请填写预算金额" />
      </a-form-item>
      <a-form-item label="实际报销金额">
        <a-input v-model:value="EditFrom.blpay" placeholder="请填写实际报销金额" />
      </a-form-item>
      <a-form-item label="差额">
        <a-input v-model:value="EditFrom.bldifference" disabled />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, onMounted, defineEmits, toRaw, defineProps } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { Years } from '../../../../api/years/years';
  import dayjs from 'dayjs';
  //--------------------------- 表格 列 ---------------------------
  const columns = ref([
    {
      title: '名称',
      dataIndex: 'blext3',
      align: 'center',
      width: 150,
    },

    {
      title: '年度预算',
      dataIndex: 'blbudget',
      align: 'center',
    },
    {
      title: '实发数',
      dataIndex: 'blpay',
      align: 'center',
    },
    {
      title: '实发数与预算数差异',
      dataIndex: 'bldifference',
      align: 'center',
    },
    {
      title: '差异分析',
      dataIndex: 'bldiffreason',
      align: 'center',
    },
    {
      title: '差异原因分析',
      dataIndex: 'action',
      fixed: 'right',
      align: 'center',
    },
  ]);
  const tableData = ref([]);
  const years = ref();
  const changedate = () => {
    tableData.value = [];
  };
  //拿到项目的projectNum
  const props = defineProps({
    DataId: String,
  });
  const tableLoading = ref(false);
  const getInitDateFind = async () => {
    if (years.value) {
      let obj = {
        year: years.value,
        projectNum: props.DataId,
      };
      try {
        tableLoading.value = true;
        let res = await Years.ProjectYearsFind(obj);
        if (res.data.length == 0) {
          getInitDate(obj.year);
        } else {
          tableData.value = res.data;
          tableLoading.value = false;
        }
      } catch (error) {
        tableData.value = [];
        smartSentry.captureError(error);
        tableLoading.value = false;
      }
    } else {
      message.warning('请选择年份');
    }
  };

  // 表格初始化
  async function getInitDate(yearName) {
    try {
      tableLoading.value = true;
      let obj = {
        year: yearName,
        projectNum: props.DataId,
      };
      let res = await Years.ProjectTableInite(obj);
      tableData.value = res.data;
      tableLoading.value = false;
    } catch (error) {
      smartSentry.captureError(error);
      tableLoading.value = false;
    }
  }
  const getRemase = () => {
    message.success('重置成功');
    years.value = '';
    tableData.value = [];
  };
  const open = ref(false);
  const blfinalaccountsid = ref();
  const showModal = (id) => {
    open.value = true;
    blfinalaccountsid.value = id;
  };
  const VarianceValue = ref(); //差异分析;
  const handleOk = async (e) => {
    try {
      let obj = {
        blfinalaccountsid: blfinalaccountsid.value,
        bldiffreason: VarianceValue.value,
        blprojectnum: props.DataId,
      };
      if (VarianceValue.value) {
        let res = await Years.ProjectEdit(obj);
        VarianceValue.value = '';
        getInitDateFind();
        open.value = false;
        message.success('修改成功');
      } else {
        message.warning('请填写差异分析');
      }
    } catch (error) {
      smartSentry.captureError(error);
    }
  };
  //修改
  const openEdit = ref(false);
  const EditFrom = ref();
  const showModalEdit = (record) => {
    record.blprojectnum = props.DataId;
    openEdit.value = true;
    EditFrom.value = { ...record };
  };
  const handleOkEdit = async () => {
    try {
      let res = await Years.ProjectEdit(EditFrom.value);
      getInitDateFind();
      openEdit.value = false;
      message.success('修改成功');
    } catch (error) {
      smartSentry.captureError(error);
    }
  };

  const labelCol = {
    style: {
      width: '100px',
    },
  };

  const confirm = async (record) => {};
  //导出
  const getImport = async () => {
    try {
      if (years.value) {
        let obj = {
          year: years.value,
          projectNum: props.DataId,
        };
        let res = await Years.ImportProject(obj);
        message.success('导出成功');
        window.open(res.address, '_self');
      } else {
        message.warning('请先选择合适的年份');
      }
    } catch (error) {}
  };
  const emit = defineEmits();
  const getOut = (e) => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };
</script>
<style lang="scss" scoped></style>
